<template>
	<view @tap="hide()"  @touchmove.stop.prevent :class="{'showTypes':showType}" class="empowerMain_box">
		<view @tap.stop class="empowerMain">
			<view class="titles">
				<image class="vm" src="../../static/image/labi.jpg" mode=""></image>
				剧豆社区集市  <span>申请</span>
				<p class="p1">
					获取您的昵称、头像、性别 及位置信息
				</p>
			</view> 
			<view class="users">
				<image src="../../static/image/labi.jpg" mode=""></image>
				<view class="txt">
					<p class="p1 one"> yw </p>
					<p class="p2">剧豆个人信息</p>
				</view>
			</view>
			<view>
				{{nativeMsg}}
			</view>
			<view class="btns">
				<u-button  @tap="hide()" :ripple="true">取消</u-button>
				<u-button :ripple="true" type="success">允许</u-button>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				showType:true,
				nativeMsg:'111'
			};
		},
		methods:{
			show(){
				this.showType = false
				// 向宿主App发送事件
				uni.sendNativeEvent('infoUser', ret => {  
					this.nativeMsg = '宿主App回传的数据：' 
					this.nativeMsg = ret
				})
			},
			hide(){
				this.showType = true 
			}
		}
	}
</script>

<style lang="less" scoped>
	.showTypes{
		display: none;
	}
.empowerMain_box{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 99999;
	
}
.empowerMain{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: white; 
	padding: 0 60rpx;
	.titles{ 
		font-size: 32rpx;
		font-weight: bold;
		color: #000; 
		padding-top: 40rpx;
		 .p1{
			 font-size: 30rpx;
			 margin-top: 30rpx;
			 padding-bottom: 30rpx;
		 }
		span{
			font-size: 30rpx;
			font-weight: 400;
			margin-left: 20rpx;
		}
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
	}
	.users{
		padding: 20rpx 0;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.txt{
			.p1{
				margin-top: 4rpx;
				color: #000;
				font-size: 30rpx;
			}
			.p2{
				margin-top: 10rpx;
				color: #a9a9a9;
			}
		}
	}
	.btns{
		padding: 30rpx 0;
		display: flex;
		button{
			width: 200rpx;
		}
	}
}
</style>
